<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Phones - Devices.css - Modern devices crafted in pure CSS</title>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Pure CSS iPhone 14 Pro, iPhone 14, iPhone X, iPhone 8, iPhone 1st gen, Google Pixel 6 Pro, Google Pixel 2 XL, Google Pixel, Samsung Galaxy S8 devices. Pure CSS mobile devices mockups. Modern phone devices crafted in pure CSS.">
    <meta name="author" content="@picturepan2">
    <meta property="og:url" content="https://devicescss.xyz/phones.html">
    <meta property="og:title" content="Phones - Devices.css - Modern devices crafted in pure CSS">
    <meta property="og:type" content="website">
    <meta property="og:description" content="Pure CSS iPhone 14 Pro, iPhone 14, iPhone X, iPhone 8, iPhone 1st gen, Google Pixel 6 Pro, Google Pixel 2 XL, Google Pixel, Samsung Galaxy S8 devices. Pure CSS mobile devices mockups. Modern phone devices crafted in pure CSS.">
    <meta property="og:image" content="https://devicescss.xyz/assets/social-image.jpg">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@picturepan2">
    <meta name="twitter:creator" content="@picturepan2">
    <link rel="icon" href="assets/favicon.svg">
    <link rel="stylesheet" href="assets/css/demo.min.css">
    <link rel="stylesheet" href="assets/css/devices.min.css">
    <link rel="canonical" href="https://devicescss.xyz/phones.html">
  </head>
  <body>
    <input class="rework-switch" type="checkbox" id="rework-switch" name="rework-switch" hidden>
    <div class="rework-container">
      <label class="rework-overlay" for="rework-switch"></label>
      <div class="rework-brand rework-brand-fixed"><a class="brand-logo" href="https://devicescss.xyz"><span class="brand-primary">D</span><span class="brand-secondary ml-1">DEVICES</span><span class="brand-extra">.CSS</span></a>
        <label class="brand-homebtn c-hand" for="rework-switch">
          <div class="icon-menu"></div>
        </label>
      </div>
      <div class="section-aside">
        <div class="sidebar-container">
          <div class="rework-brand"><a class="brand-logo" href="https://devicescss.xyz"><span class="brand-primary">D</span><span class="brand-secondary ml-1">DEVICES</span><span class="brand-extra">.CSS</span>
              <h1 class="text-assistive">Devices.css</h1></a></div>
          <nav class="rework-menu"><a class="menu-parent" href="phones.html">Phones</a>
            <ul class="menu menu-nav">
              <li class="menu-item"><a class="rework-title" href="phones.html#iphone-14-pro">iPhone 14 Pro</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#iphone-14">iPhone 14</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#iphone-x">iPhone X</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#iphone-8">iPhone 8</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#the-iphone">iPhone</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel-6-pro">Google Pixel 6 Pro</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel-2-xl">Google Pixel 2 XL</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#google-pixel">Google Pixel</a></li>
              <li class="menu-item"><a class="rework-title" href="phones.html#samsung-galaxy-s8">Samsung Galaxy S8</a></li>
            </ul><a class="menu-parent" href="computers.html">Computers</a>
            <ul class="menu menu-nav">
              <li class="menu-item"><a class="rework-title" href="computers.html#macbook-pro">MacBook Pro</a></li>
              <li class="menu-item"><a class="rework-title" href="computers.html#imac">iMac</a></li>
              <li class="menu-item"><a class="rework-title" href="computers.html#macbook-pro-2018">MacBook Pro (2018)</a></li>
              <li class="menu-item"><a class="rework-title" href="computers.html#macbook">MacBook</a></li>
              <li class="menu-item"><a class="rework-title" href="computers.html#surface-book">Surface Book</a></li>
              <li class="menu-item"><a class="rework-title" href="computers.html#surface-studio">Surface Studio</a></li>
            </ul><a class="menu-parent" href="tablets.html">Tablets</a>
            <ul class="menu menu-nav">
              <li class="menu-item"><a class="rework-title" href="tablets.html#ipad-pro">iPad Pro</a></li>
              <li class="menu-item"><a class="rework-title" href="tablets.html#ipad-pro-2017">iPad Pro (2017)</a></li>
              <li class="menu-item"><a class="rework-title" href="tablets.html#surface-pro-2017">Surface Pro</a></li>
            </ul><a class="menu-parent" href="watches.html">Watches</a>
            <ul class="menu menu-nav">
              <li class="menu-item"><a class="rework-title" href="watches.html#apple-watch-ultra">Apple Watch Ultra</a></li>
              <li class="menu-item"><a class="rework-title" href="watches.html#apple-watch-series-8">Apple Watch Series 8</a></li>
            </ul><a class="menu-parent" href="accessories.html">Accessories</a>
            <ul class="menu menu-nav">
              <li class="menu-item"><a class="rework-title" href="accessories.html#homepod">HomePod</a></li>
              <li class="menu-item"><a class="rework-title" href="accessories.html#pro-display-xdr">Pro Display XDR</a></li>
            </ul>
          </nav>
          <div class="rework-actions">
            <div class="rework-action"><a class="btn btn-link btn-block" href="https://www.paypal.me/picturepan2" target="_blank" rel="noopener noreferrer">PayPal Donate</a></div>
          </div>
        </div>
      </div>
      <main class="section-main">
        <div class="container grid-md">
          <div class="columns">
            <div class="hero-container column col-md-12">
              <div class="rework-hero">
                <div class="hero-content">
                  <h1 class="hero-title">Phones</h1>
                  <h2 class="hero-subtitle">Modern phone devices crafted in pure CSS.</h2>
                  <h2 class="text-assistive">Pure CSS iPhone 14 Pro, iPhone 14, iPhone X, iPhone 8, iPhone 1st gen, Google Pixel 6 Pro, Google Pixel 2 XL, Google Pixel, Samsung Galaxy S8 devices. Pure CSS mobile devices mockups. Modern phone devices crafted in pure CSS.</h2>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="iphone-14-pro">iPhone 14 Pro<a class="ml-2" href="#iphone-14-pro">#</a></h2>
              <h3 class="text-assistive">Pure CSS iPhone 14 Pro, iPhone 14 Pro in pure CSS</h3>
              <div class="rework-content">
                <p>Introducing Dynamic Island. Vital new safety features designed to save lives. A 48MP camera for up to 4x the resolution. 4 colors.</p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#342C3F;" data-tooltip="device-purple (default)"></div>
                  <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver"></div>
                  <div class="dot tooltip" style="background:#76726F;" data-tooltip="device-black"></div>
                  <div class="dot tooltip" style="background:#F6EEDB;" data-tooltip="device-gold"></div>
                </div>
                <div class="device device-iphone-14-pro">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14-pro.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="iphone-14">iPhone 14<a class="ml-2" href="#iphone-14">#</a></h2>
              <h3 class="text-assistive">Pure CSS iPhone 14, iPhone 14 in pure CSS</h3>
              <div class="rework-content">
                <p>iPhone 14 and iPhone 14 Plus. 6.1” and 6.7” sizes. All-day battery life. Emergency SOS via satellite. Crash Detection. Epic photos. 5 colors.</p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#2B2F33;" data-tooltip="device-midnight (default)"></div>
                  <div class="dot tooltip" style="background:#c8bad3;" data-tooltip="device-purple"></div>
                  <div class="dot tooltip" style="background:#D3CDC7;" data-tooltip="device-starlight"></div>
                  <div class="dot tooltip" style="background:#EC302B;" data-tooltip="device-red"></div>
                  <div class="dot tooltip" style="background:#98ABBE;" data-tooltip="device-blue"></div>
                </div>
                <div class="device device-iphone-14">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone-14.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="iphone-x">iPhone X<a class="ml-2" href="#iphone-x">#</a></h2>
              <h3 class="text-assistive">Pure CSS iPhone X, iPhone X in pure CSS</h3>
              <div class="rework-content">
                <p>iPhone X (pronounced "iPhone Ten") is a smartphone in Apple's iPhone lineup. It was announced on September 12, 2017 alongside the iPhone 8 and iPhone 8 Plus at the Steve Jobs Theater in the Apple Park campus. It was released on November 3, 2017 with a starting price of $999.</p>
              </div>
              <div class="rework-device phones">
                <div class="device device-iphone-x">
                  <div class="device-frame">
                    <video class="device-screen" muted="muted" autoplay loop>
                      <source src="assets/video/bg-01.mp4" type="video/mp4">
                    </video>
                  </div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="iphone-8">iPhone 8<a class="ml-2" href="#iphone-8">#</a></h2>
              <h3 class="text-assistive">Pure CSS iPhone 8, iPhone 8 in pure CSS</h3>
              <div class="rework-content">
                <p>The iPhone 8 is a smartphone that was announced alongside the iPhone 8 Plus and iPhone X on September 12, 2017 and was released on September 22. It serves as the successor to the iPhone 7 and predecessor to the iPhone XR. The external design of the iPhone 8 was reused by the 2nd generation iPhone SE in 2020.</p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
                  <div class="dot tooltip" style="background:#f7e8dd;" data-tooltip="device-gold"></div>
                  <div class="dot tooltip" style="background:#9b9ba0;" data-tooltip="device-spacegray"></div>
                </div>
                <div class="device device-iphone-8">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-03.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="the-iphone">iPhone<a class="ml-2" href="#the-iphone">#</a></h2>
              <h3 class="text-assistive">Pure CSS iPhone, iPhone in pure CSS</h3>
              <div class="rework-content">
                <p>iPhone combines three amazing products — a revolutionary mobile phone, a widescreen iPod with touch controls, and a breakthrough Internet communications device with desktop-class email, web browsing, maps, and searching — into one small and lightweight handheld device.</p>
              </div>
              <div class="rework-device phones">
                <div class="device device-the-iphone">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-iphone.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="docs-sponsor">
            <div class="hide-md text-center">
              <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
              <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
              <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
            <div class="show-md text-center">
              <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
              <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="google-pixel-6-pro">Google Pixel 6 Pro<a class="ml-2" href="#google-pixel-6-pro">#</a></h2>
              <h3 class="text-assistive">Pure CSS Google Pixel 6 Pro, Google Pixel 6 Pro in pure CSS</h3>
              <div class="rework-content">
                <p>Pixel 6 Pro, the most advanced Pixel Camera ever.</p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#CBCBC8;" data-tooltip="device-white (default)"></div>
                  <div class="dot tooltip" style="background:#FFD6AD;" data-tooltip="device-gold"></div>
                  <div class="dot tooltip" style="background:#323334;" data-tooltip="device-black"></div>
                </div>
                <div class="device device-google-pixel-6-pro">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-pixel-6.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="google-pixel-2-xl">Google Pixel 2 XL<a class="ml-2" href="#google-pixel-2-xl">#</a></h2>
              <h3 class="text-assistive">Pure CSS Google Pixel 2 XL, Google Pixel 2 XL in pure CSS</h3>
              <div class="rework-content">
                <p>The Pixel 2 and Pixel 2 XL are a pair of Android smartphones designed, developed, and marketed by Google as part of the Google Pixel product line.</p>
              </div>
              <div class="rework-device phones">
                <div class="device device-google-pixel-2-xl">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-06.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="google-pixel">Google Pixel<a class="ml-2" href="#google-pixel">#</a></h2>
              <h3 class="text-assistive">Pure CSS Google Pixel, Google Pixel in pure CSS</h3>
              <div class="rework-content">
                <p> </p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
                  <div class="dot tooltip" style="background:#6a6967;" data-tooltip="device-black"></div>
                  <div class="dot tooltip" style="background:#7695ff;" data-tooltip="device-blue"></div>
                </div>
                <div class="device device-google-pixel">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-06.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="docs-sponsor docs-sponsor-sidebar text-center">
            <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:120px;height:240px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="5087273059"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
          </div>
          <div class="columns">
            <div class="content-container column col-md-12">
              <h2 class="rework-title" id="samsung-galaxy-s8">Samsung Galaxy S8<a class="ml-2" href="#samsung-galaxy-s8">#</a></h2>
              <h3 class="text-assistive">Pure CSS Samsung Galaxy S8, Samsung Galaxy S8 in pure CSS</h3>
              <div class="rework-content">
                <p> </p>
              </div>
              <div class="rework-device phones">
                <div class="dots">
                  <div class="dot tooltip active" style="background:#cfcfcf;" data-tooltip="device-black (default)"></div>
                  <div class="dot tooltip" style="background:#a3c5e8;" data-tooltip="device-blue"></div>
                </div>
                <div class="device device-galaxy-s8 device-blue">
                  <div class="device-frame"><img class="device-screen" src="assets/img/bg-04.jpg" loading="lazy"></div>
                  <div class="device-stripe"></div>
                  <div class="device-header"></div>
                  <div class="device-sensors"></div>
                  <div class="device-btns"></div>
                  <div class="device-power"></div>
                  <div class="device-home"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns"> 
            <ul class="pagination column">
              <div class="page-item page-next"><a href="computers.html">
                  <div class="page-item-subtitle">Next</div>
                  <div class="page-item-title h5">Computers</div></a></div>
            </ul>
          </div>
        </div>
        <footer class="section-footer">
          <div class="container grid-md"><span>Crafted with <span class="text-error">♥ </span><span>by </span><a href="https://twitter.com/picturepan2" target="_blank" rel="noopener noreferrer"><strong>Yan Zhu</strong></a></span><span class="ml-1 mr-1">·</span><a href="https://github.com/picturepan2/devices.css" target="_blank" rel="noopener noreferrer"><strong>GitHub</strong></a><span class="ml-1 mr-1">·</span><a href="https://www.paypal.me/picturepan2" target="_blank" rel="noopener noreferrer"><strong>PayPal Donate</strong></a></div>
        </footer>
      </main>
    </div>
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-2702768-16"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      gtag('config', 'UA-2702768-16');
    </script>
  </body>
</html>